<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-09-13 21:16:35
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-03-11 22:59:08
-->
<template>
  <a-tree-select
    :treeData="optionItems"
    :treeDataSimpleMode="true"
    :value="value"
    @select="onValueChanged"
    v-bind="$props"
    placeholder="请选择机构"
    show-search
  >
    <template #title="{ value, label, dataRef }">
      <span v-if="dataRef?.nodeType == 16" style="color: rgb(0, 82, 122)"
        >{{ label }}</span
      >
      <template v-else>{{ label }}</template>
    </template>
  </a-tree-select>
</template>
import { filter } from "dom7";

<script lang="ts" setup>
import { computed } from "vue";
import { useDataStore } from "@/store";
import { storeToRefs } from "pinia";
import { EmptyGuid } from "@/helpers/contants";
import { enumName } from "@/plugins/enums";

const emits = defineEmits([
  "update:value",
  "update:name",
  "update:code",
  "change",
]);

const props = defineProps({
  value: { type: [String] },
  code: { type: [String] },
  name: { type: [String] },
  mode: { type: String, default: "" },
});

const { organizationItems } = storeToRefs(useDataStore());

const optionItems = computed(() => {
  return organizationItems.value
    .filter((x) => x.nodeType < 32)
    .map((x) => {
      return {
        id: x.id,
        pId: x.parentId,
        value: x.id,
        label: x.name,
        rootPid: EmptyGuid,
        name: x.name,
        pathCode: x.pathCode,
        selectable: x.nodeType == 16,
        nodeType: x.nodeType,
      };
    });
});

const onValueChanged = (value: string) => {
  let item = organizationItems.value.find(
    (x) => x.id == value || x.pathCode == value
  );
  emits("change", item);
  emits("update:value", value);
  emits("update:code", item?.pathCode);
  emits("update:name", item?.name);
};
</script>

<style lang="less" scoped></style>
